import "./index.scss"

import React, { Component } from 'react'
import {Button,Form,Row,Col,Input , Select,DatePicker, Cascader, Table , Tag,Popconfirm} from "antd"
import { advicecatetory } from "../../utils";
import moment from "moment"
import {FormOutlined,DeleteOutlined,EyeOutlined} from "@ant-design/icons"
import { ajax } from "../../api";
import {observer} from "mobx-react"
import mobxdata  from "../../mobx/data"
const {RangePicker} = DatePicker
const {Option} = Select
@observer
class AdviseList extends Component {
    state={
        adviseList:[],
        columns:[
            {
                align:"center",
                title:"#",
                width:50,
                render:(text,item,index)=>{
                    return (index+1)
                }
            },
            {
                align:"center",
                title:"意见人",
                key:"author",
                dataIndex:"author"
            },
            {
                align:"center",
                title:"发表时间",
                dataIndex:"time",
                render:(text,item,index)=>{
                    return moment(text).format("YYYY-MM-DD")
                }
            },
            {
                align:"center",
                title:"意见分类",
                dataIndex:"category",
                render:(text,item,index)=>{
                    const colors = ["#EC4141","#007ACC"]
                    return text.map((l,i)=>(
                        <Tag key={i} color={colors[i]} > {l}</Tag>
                    ))
                }
            },
            {
                align:"center",
                title:"意见标题",
                dataIndex:"title",
                key:"title"
            },
            {
                align:"center",
                title:"意见点赞",
                dataIndex:'hot',
                key:"hot"
            },
            {
                align:"center",
                title:"操作",
                render:(text,item,index)=>{
                    const {userinfo} = mobxdata
                    var flag = (userinfo.username==item.author);
                    return (
                        <p>
                           { flag&&<Popconfirm
                                title="Are you sure to delete this Advise ?"
                                onConfirm={()=>this.confirm(item)}
                                onCancel={this.cancel}
                                okText="确定"
                                cancelText="取消"
                            >
                                <Button size="small" type="primary" shape="circle" icon={<DeleteOutlined />} />
                            </Popconfirm>}
                            {flag&&<Button style={{margin:"0 5px"}} onClick={()=>this.gotoUpdateAdvise(item)} size="small" type="primary" shape="circle" icon={<FormOutlined />} />}

                            <Button size="small" onClick={()=>this.gotoDetail(item)}  type="danger" shape="circle" icon={<EyeOutlined />} />
                        </p>
                    )
                }
            },
        ]
    }
    componentDidMount(){
        // this.props.dispatch(getAdviseListAsync())
        ajax.findadviselist()
        .then(res=>{
            this.setState({
                adviseList:res.result
            })
        })
    }
    gotoUpdateAdvise = (item)=>{
        this.props.history.push("/main/advise/update?aid="+item._id)
    }
    gotoCreateAdvise=()=>{
        this.props.history.push('/main/advise/create')
    }
    gotoDetail = (item)=>{
        this.props.history.push('/main/advise/detail?aid='+item._id)
    }
    cancel = ()=>{

    }
    confirm = (item)=>{
        ajax.deladviseone({
            _id :item._id
        })
        .then(res=>{
            if(res.code==200){
                var adviseList1 = this.state.adviseList.filter(l=>l._id!=item._id)
                this.setState({
                    adviseList:adviseList1
                })
            }
        })
    }
    resetSearchForm = ()=>{
        this.searchFrom.resetFields()
    }
    startSearchData = (value)=>{
        ajax.findadviselist(value)
        .then(res=>{
            if(res.code ==200){
                console.log(res.result);
                this.setState({
                    adviseList:res.result
                })
            }
        })
    }
    render() {
        return (
            <div>
                <Button type="primary" onClick={this.gotoCreateAdvise} style={{margin:'10px 0 '}}>添加意见</Button>
                <Form 
                    ref={el=>this.searchFrom=el}
                    onFinish={this.startSearchData}
                >
                    <Row>
                        <Col span={8} >
                            <Form.Item
                                label="意见作者"
                                name="author"
                                
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={8} offset={4}>
                            <Form.Item
                                label="发布时间"
                                name="time"   
                            >
                                <RangePicker />
                            </Form.Item>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={8} >
                            <Form.Item
                                label="意见分类"
                                name="category"
                            >   
                                <Cascader options={advicecatetory}></Cascader>
                            </Form.Item>
                        </Col>
                        <Col span={8} offset={4}>
                            <Form.Item >   
                                <Button type="primary"  htmlType="submit"  >搜索</Button>
                                <Button type="" style={{margin:'0 8px'}} onClick={this.resetSearchForm}>重置</Button>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>

                <Table
                    id="mytable"
                    sticky
                    bordered
                    dataSource={this.state.adviseList}
                    columns ={this.state.columns }
                    rowKey={
                        (item)=>item._id
                    }
                    pagination={{pageSize:5}}
                >
                    
                </Table>
            </div>
        )
    }
}
export default AdviseList
